<template>
  <div class="bar">
    <t-row justify="space-between">
      <div class="tip">
        <t-icon name="link" size="large" /> {{ lang.t('tip') }} <b>{{ userStore.getData().number }}</b>
      </div>
      <t-button theme="primary" @click="form.open({})">
        <template #icon><t-icon name="add" /></template>
        {{ $t('common.create') }}
      </t-button>
    </t-row>
  </div>
  <t-loading :loading="loading">
    <List :data="list" @update="data => form.open(data)" @delete="onDelete" />
  </t-loading>
  <Form ref="form" @get="getData" />
</template>

<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import userStore from '@/store/user'
  import { account, accountDelete } from '@/api/manage/user'
  import List from './list.vue'
  import Form from './form.vue'

  const lang = app.lang.space('page.user.account')
  const form = ref(null)
  const list = ref([])
  const loading = ref(false)

  const getData = () => {
    loading.value = true
    account().then(res => {
      // 循环插件
      list.value = res.map(item => {
        item.plugin_list = app.plugin.filter(item.plugin)
        return item
      })
    }).finally(() => {
      loading.value = false
    })
  }

  const onDelete = data => {
    app.confirm({
      theme: 'warning',
      header: app.lang.t('common.warning'),
      body: app.lang.t('message.confirm.delete'),
      confirmBtn: {
        theme: 'warning',
        content: app.lang.t('common.delete'),
      }
    }, hide => {
      accountDelete(data.id).then(res => {
        app.message('success', 'message.' + res.message)
        getData()
        hide()
      }).catch(err => {
        app.message('error', 'message.error.' + err.message)
      })
    })
  }

  getData()
</script>

<style lang="scss">
  @import '@/style/global';

  .page-user-account{
    min-height: 300px;
    .name{
      color: $color-title;
      font-size: 18px;
      padding: 0 20px 10px 0;
      font-weight: bold;
    }

    .more{
      position: absolute;
      top: 25px;
      right: 20px; 
    }

    .item{  
      color: $color-title;
      font-size: 14px;
      line-height: 20px;
      margin-top: 10px;
      span{
        width: 80px;
        display: inline-block;
        color: $color-body;
      }

      b{
        color: $color;
        font-weight: normal;

        &.error{
          color: $color-error;
        }
      }
    }
    .plugin{
      margin: 30px 0 0 -5px;
      height: 30px; 
      .avatar{
        margin-right: 5px;
        background: 0;
      }
    }
  }
</style>